<template>
	<div style="background: #36759c">
		<yd-it-road
			ref="ydItRoadRef"
			:config="{
				type: itRoad.type,
				canvasHeight: 600,
				noDataFlag: false,
				customOptions: itRoad.customOptions,
			}"
			@graphInited="graphInited"
		></yd-it-road>
	</div>
</template>

<script setup lang="tsx">
import { reactive, ref, onMounted } from 'vue';
import YdItRoad from '../../components/YdItRoad/index.vue';
import data from './sagamentData.js';
import { ConfigType } from '@/components/YdItRoad/itRoad-type';
// let itRoadMode = ref();
let ydItRoadRef = ref<ApiPromise>();
let itRoad = reactive<ConfigType>({
	type: 'SegmentOverview',
	customOptions: {
		layout: {
			type: 'dagre',
			rankdir: 'LR',
			nodesep: 40,
			ranksep: 80,
		},
		modes: {
			// 默认模式
			defaultMode: [
				// 节点高亮(自定义)
				'activate-node',
			],
			edit: ['activate-node'],
		},
		// 工具按钮
		toolbarObj: {
			getContent: () => {
				let outDiv = document.createElement('div');
				outDiv.style.width = '120px';
				outDiv.innerHTML = `
                <ul>
                  <li code="edit">
                    <svg class="svg-icon" aria-hidden="true"  >
                      <use  id="iconEditId" xlink:href="#icon-itRoad-edit" fill="#ffffff" />
                    </svg>
                  </li>
                </ul>
                `;

				// "<ul>"+
				//     '<li code="edit">'+<el-icon id="iconEditId"><Edit /></el-icon>+'</li>'+
				//   '</ul>';
				return outDiv;
			},
			handleClick: (code: string) => {
				// if (code === 'edit') {
				// 	if (itRoadMode.value === 'default') {
				// 		itRoadMode.value = 'edit';
				// 		document.getElementById('iconEditId').setAttribute('fill', '#2beded');
				// 	} else {
				// 		itRoadMode.value = 'default';
				// 		document.getElementById('iconEditId').setAttribute('fill', '#ffffff');
				// 	}
				// 	ydItRoadRef.value.setGraphMode(itRoadMode.value);
				// }
			},
		},
	},
});

onMounted(() => {
	graphInited();
});
function graphInited() {
	ydItRoadRef.value.setLayout({
		type: 'segmentOverviewLayout',
	});
	console.log('ydItRoadRef.value', ydItRoadRef.value);
	ydItRoadRef.value.loadItRoadData(data);
}
</script>

<style lang="scss" scoped></style>
